<template>
  <div class="editor-zone">
    <el-empty
      :image-size="80"
      v-show="!conversation || conversation.status == 'PENDING'"
      description="接收处理后才能发送消息!"
    ></el-empty>
    <div v-show="conversation && conversation.status == 'PROCESSING'">
      <div class="toolbar">
        <span>
          <upload @setMsgBody="setMsgBody"></upload>
        </span>
        <span>
          <custom-emoji @setMsgBody="setMsgBody"></custom-emoji>
        </span>
        <span>
          <assign v-bind="$attrs" :from_uid="user_id"></assign>
        </span>
        <span class="tips">
          <tips @setMsgBody="setMsgBody">快捷回复</tips>
        </span>
      </div>
      <textarea
        :rows="4"
        v-model="form.content"
        class="text-editor"
        :readonly="readonly"
        @paste.prevent="handlePaste"
      ></textarea>
      <el-button
        plain
        size="small"
        type="primary"
        class="send-btn"
        :disabled="!form.content"
        @click="handleSend"
      >发送</el-button>
      <el-button plain size="small" class="send-btn" :disabled="!form.content" @click="resetForm">清空</el-button>
    </div>
  </div>
</template>

<script setup>
import tips from './Tips.vue'
import upload from './Upload.vue'
import assign from './Assign.vue'
import customEmoji from './Emoji.vue'
import ws from "../../../socket.js"
import { reactive, toRefs } from 'vue'
import { addMessage } from '../../api/message'
import { ElMessage } from "element-plus"

const props = defineProps({
  conversation: {
    type: Object,
    required: true,
  },
  user_id: {
    required: true,
  }
})

const emit = defineEmits(['setLatestMsg'])

const state = reactive({
  readonly: false,
  form: {
    type: 1,
    content: '',
  }
})

const resetForm = () => {
  state.form.type = 1
  state.form.content = ''
  state.readonly = false
}

const generatorMessageCommon = () => {
  return {
    from: 2,
    type: state.form.type || 1,
    content: state.form.content,
    sender: props.conversation.user_id,
    receiver: props.conversation.guest_id,
    conversation_id: props.conversation.id,
    to_role: "guest",
  }
}

const handleSend = async () => {
  const newMsg = generatorMessageCommon()
  let { status, data } = await addMessage(newMsg)
  if (status === 'success') {
    emit('setLatestMsg', props.conversation.id, data)
    resetForm()
  } else {
    ElMessage.error("发送失败")
  }
}

const setMsgBody = (content, type, sendNow = false) => {
  state.form.type = type
  state.form.content += content;
  if (sendNow) {
    handleSend()
  }
}

const handlePaste = (e) => {
  let clipboardData = e.clipboardData || e.originalEvent.clipboardData
  let pasteContent = clipboardData.getData("Text")
  let flag = '?src=copy&type=img'
  //通过设定的标识符判断粘贴的内容是不是图片
  if (pasteContent.indexOf(flag) !== -1) {
    //去除标识
    pasteContent = pasteContent.replace(flag, '')
    state.form.type = 3
    state.form.content = pasteContent
    //文本框粘贴了图片的时候不能再有其它的输入,设置文本框为只读模式
    state.readonly = true
  } else {
    state.form.type = 1
    state.form.content = pasteContent
  }
}

const { readonly, form } = toRefs(state)

</script>

<style scoped>
.editor-zone {
  height: 180px;
  border-top: 1px solid #ebebeb;
  background-color: #fff;
}

.toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
}

.toolbar .tips {
  font-size: 14px;
}

.toolbar span {
  font-size: 20px;
  margin-left: 15px;
  color: #333;
  transition: color 0.15s linear;
  cursor: pointer;
}

.send-btn {
  float: right;
  margin-right: 20px;
}

.text-editor {
  width: 100%;
  height: 90px;
  box-sizing: border-box;
  border: none;
  outline: none;
  resize: none;
  padding: 0 10px;
}

.el-empty {
  height: 180px;
}
</style>